<template id="app-footer">
	<div class="footer-container">
		<v-row class="footer-row">
			<v-col class="footer-span erweima-span" span="6">
				<div v-for="n in 2" :key="n" class="erweima-cell">
					<div class="text-xl erweima-text">微信公众号</div>
					<div class="erweima-img">
						<img src="/static/images/code.jpeg"/>
					</div>
				</div>
			</v-col>
			<v-col class="footer-span info-span" span="18">
				<div class="info-cell">
					<div class="info-box" v-for="n in 3" :key="n">
						<div class="text-xl">联系我们</div>
						<div class="text-md info-content">北京市朝阳区光华路9号天阶大厦xuantongjiaoshi@126.com</div>
					</div>
				</div>
				<div class="power-cell">
					<span class="text-lg">Powered by Leil 京ICP备17020743号-1</span>
				</div>
			</v-col>
		</v-row>
		<div class="mobile-footer-panel">
			<div class="mobile-footer-cell">
				<div class="text-xl">微信公众号</div>
				<div class="erweima-mobile">
					<img src="/static/images/code.jpeg"/>
				</div>
			</div>
			<div class="mobile-footer-cell">
				<div class="text-xl">联系我们</div>
				<div class="text-md" style="margin-top:10px;">北京市朝阳区光华路9号天阶大厦xuantongjiaoshi@126.com</div>
			</div>
			<div class="mobile-footer-cell">
				<span class="text-md">Powered by Leil 京ICP备17020743号-1</span>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {

		}
	}
}
</script>
<style>
.footer-container {
	width: 100%;
	padding: 50px 0;
	background-color: #F3EEEB;
	line-height: 1.2;
}

.footer-row {
	height: 120px;
	width: 80%;
	margin: 0 auto;
}

.footer-span {
	height: 100%;
}

.erweima-span {
	border-right: 2px solid #DBD3CF;
	display: flex;
	flex-direction: row;
	justify-content: center;
}

.erweima-cell {
	width: 40%;
	/* padding-top: 15px; */
}

.erweima-text,
.erweima-img {
	text-align: center;
}

.erweima-img {
	margin-top: 20px;
}

.erweima-img img {
	width: 70%;
}

.info-span {
	display: flex;
	flex-direction: column;
}

.info-cell {
	height: 80%;
	display: flex;
	flex-direction: row;
	justify-content: center;
}

.info-box {
	width: 30%;
}

.info-content {
	margin-top: 20px;;
}

.power-cell {
	height: 20%;
	margin-left: 5%;
}

.mobile-footer-panel {
	display: none;
}

/** 响应式手机端样式布局 */
@media screen and (max-width: 768px) {
	.footer-row {
		display: none;
	}
	.mobile-footer-panel {
		width: 100%;
		display: block;
	}
	.mobile-footer-cell {
		width: 100%;
		text-align: center;
	}

	.mobile-footer-cell:not(:last-child) {
		margin-bottom: 20px;
	}

	.erweima-mobile {
		width: 90px;
		margin: 10px auto;
	}
	.erweima-mobile img {
		width: 100%;
	}
}



</style>